<html>
	<head>
		<meta charset="utf-8">
		<title>JavaScript Loan Calculator</title>
		<style>
			.output{
				font-weight:bold;
			}
			#payment{
				text-weightunderline;
			}
			#graph{
				border:solid black 1px;
			}
			th,td{
				vertical-align:top;
			}
		</style>
	</head>
	<body>
		<table>
			<tr>
				<th>Enter Loan DATA:</th>
				<td></td>
				<th>Loan Balance,Cumulative Equity,and Interest Payments</th>
			</tr>
			
			<tr>
				<td>Amount of the loan($):</td>
				<td>
					<input id="amount" onchange="calculate()"/>
				</td>
				<td rowspan=8>
					<canvas id="graph" width="400" height="250">
					</canvas>
				</td>
			</tr>
			
			<tr>
				<td>Annual interest(%):</td>
				<td>
					<input id="api" onchange="calculate()"/>
				</td>
			</tr>
			
			<tr>
				<td>Repayment period(years):</td>
				<td>
					<input id="years" onchange="calculate()"/>
				</td>
			</tr>
			
			<tr>
				<td>Zipcode(to find lenders):</td>
				<td>
					<input id="zipcode" onchange="calculate()"/>
				</td>
			</tr>
			
			<tr>
				<th>Approximate Payments:</th>
				<td>
					<button onclick="calculate()">Calculator</button>
				</td>
			</tr>
			
			<tr>
				<td>Monthly payment:</td>
				<td>
					$<span class="output" id="payment"></span>
				</td>
			</tr>
			
			<tr>
				<td>Total payment:</td>
				<td>
					$<span class="output" id="total"></span>
				</td>
			</tr>
			
			<tr>
				<td>Total interest:</td>
				<td>
					$<span class="output" id="totalInterest"></span>
				</td>
			</tr>
			
			<tr>
				<th>Sponsors:</th>
				<td>
					Apply for your loan with one of these fine lenders:
					<div id="lenders"></div>
				</td>
			</tr>
		</table>
	</body>
	<script type="text/javascript">
		function calculate(){
			//查找文档种用于输入输出的元素
			var amount = document.getElementById("amount");
			var apr = document.getElementById("apr");
			var years = document.getElementById("years");
			var zipcode = document.getElementById("zipcode");
			var payment = document.getElementById("payment");
			var total = document.getElementById("total");
			var totalInterest = document.getElementById("totalInterest");
			
			
		}
	</script>
</html>